<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>更新时的一个问题</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>人员列表</h2>
			<!--v-model双向绑定-->
			<button @click="updateM">更新马冬梅信息</button>
			<ul v-for="p in persons" :key="p.id">
				<li>{{p.name}}-{{ p.age }}- {{ p.sex }}</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					persons: [
						{id: "001", name:'周冬雨', age:20, sex:'女'},
						{id: "002", name:'马冬梅', age:19, sex:'女'},
						{id: "003", name:'周杰伦', age:21, sex:'男'},
						{id: "004", name:'温兆伦', age:22, sex: '男'},
					],
				},
				methods: {
					updateM() {

						// 这些方式修改数据中的元素，vue 可以监测到数据变化
						
						this.persons[1].name = '马老师'; //奏效
						this.persons[1].age = 50; //奏效
						this.persons[1].sex = '男'; //奏效
						/*
							splice(index ,howmany , item1, …, itemX )
							次方法通过删除或替换现有元素或者原地添加新的元素来修改数组，
							并以数组形式返回被修改的内容。
							此方法会改变原数组
						*/
						// 删除index为1处的元素，在该位置添加一个新的元素
						this.persons.splice(1, 1, {
							id: '002',
							name: '马老师',
							age: 50,
							sex: '男'
						});

						// 注意：这样修改vue是无法监测数据变化的
						this.persons[1] = {
							id: '002',
							name: '马老师',
							age: 50,
							sex: '男'
						};
						// 实际上数据已经修改成功了，但是vue没有监测到变化，所以页面没有更新，
						console.log(this.persons[1])
					}
				}
			});
		</script>
	</body>
</html>